<style lang="less" scoped>
  @import "../../styles/common.less";
</style>

<template>
  <div class="body-content">
    <Row>
      <Col span="24">
        <Card>
          <p slot="title">
            用户列表
          </p>
          <Row class="margin-top-10">
            <Input placeholder="请输入用户名搜搜..." style="width: 200px" />
            <span style="margin: 0 10px;"><Button type="primary" icon="search">搜索</Button></span>
            <Button type="ghost" @click="handleAdd">新增</Button>
          </Row>
          <Row class="margin-top-10">
            <page-table refs="table" :columnsList="columnsList" :value="tableData" :currentPage="pageInfo.currentPage" :total="pageInfo.totalCount" :pageSize="pageInfo.pageSize" @on-edit="handleEdit" @on-delete="handleDel" @on-change-page="changePage" @get-select-ids="getSelectIds"></page-table>
          </Row>
        </Card>
      </Col>
    </Row>
  </div>
</template>
<script>
import pageTable from '@/views/my-components/table/page-table.vue'
import iView from 'iview'
import Vue from "vue"
import util from '@/libs/util.js'

Vue.use(iView)

export default {
  name: 'system-index',
  data () {
    return {
      pageInfo: {
        currentPage: 1,
        totalCount: 150,
        pageSize: util.pageInfo.pageSize
      },
      selectIds: [],
      columnsList: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          key: 'id'
        },
        {
          title: 'Name',
          key: 'name',
          render: (h, params) => {
            return h('div', [
              h('Icon', {
                props: {
                  type: 'person'
                }
              }),
              h('strong', params.row.name)
            ])
          }
        },
        {
          title: 'Age',
          key: 'age'
        },
        {
          title: 'Address',
          key: 'address'
        },
        {
          title: 'Action',
          key: 'action',
          width: 200,
          align: 'center',
          handle: ['edit', 'delete']
        }
      ],
      tableData: [
        {
          id: 1,
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park'
        },
        {
          id: 2,
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park'
        }
      ]
    }
  },
  components: {
    pageTable
  },
  computed: {
  },
  methods: {
    //  添加跳转指定页面
    handleAdd () {
      this.$router.push({
        name: 'system-user-edit'
      })
    },
    //  编辑跳转指定页面
    handleEdit (val, index) {
    },
    //  单条删除
    handleDel (val, index) {
      this.tableData.splice(index, 1)
    },
    //  分页改变
    changePage (page) {
      // 这里直接更改了模拟的数据，真实使用场景应该从服务端获取数据
      // this.tableData1 = this.mockTableData1();
      this.pageInfo.currentPage = page
      iView.LoadingBar.start()
      this.refreshWithPage().then(
        () => {
          iView.LoadingBar.finish()
        },
        err => {}
      )
    },
    //  分页查询
    refreshWithPage () {
      iView.LoadingBar.start()
      return new Promise((resolve, reject) => {

      })
    },

    getSelectIds (selectIds) {
      this.selectIds = selectIds
    }
  },
  created () {
    this.pageInfo.currentPage = this.$route.query.page ? this.$route.query.page : 1
    this.refreshWithPage()
  }
}
</script>
